import Vue from 'vue'
import axios from 'axios'

import xss from 'xss'

const myWhiteList = xss.getDefaultWhiteList()

var options = {
  whiteList: {
    ...myWhiteList,
    ...{
      p: ['style'],
      span: ['class'],
      h1: ['id'],
      h2: ['id'],
      h3: ['id'],
      h4: ['id'],
      h5: ['id'],
      h6: ['id']
    }
  }
}

const myxss = new xss.FilterXSS(options)

import Element from './element/index'
import './element/packages/theme-chalk/src/index.scss'
import VueI18n from 'vue-i18n'
import Card from '@/components/Card'
import Progress from '@/components/Progress'
// import PageHeader from '@/components/PageHeader'
// import { MessageBox } from 'element-ui'

import 'normalize.css/normalize.css'
import './styles/tailwind.css'
import '@/styles/index.scss'
import 'vue-directive-ellipsis/dist/ellipsis.umd.css'
// import locale from 'element-ui/lib/locale'
import Cookies from 'js-cookie'
import hljs from 'highlight.js'
import VueHighlightJS from 'vue-highlightjs'
import demoBlock from '@/components/DemoBlock/demo-block.vue'
import Banner from '@/components/Banner/index.vue'

// import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

// 全局Confrim 组件
import Confirm from '@/components/alert'
import '@/components/Steps'

import App from './App'
import store from './store'
import router from './router'

import Ellipsis from '@/directives/ellipsis'
import Request from '@/directives/request'
import Loadmore from '@/directives/loadmore'
import '@/directives/permission'

import '@/icons' // icon
import '@/permission' // permission control

import MapboxDraw from '@mapbox/mapbox-gl-draw'
Vue.prototype.$MapboxDraw = MapboxDraw

Vue.prototype.$commonConfirm = Confirm
Vue.use(Element)

// ElementUI.Dialog.props.closeOnClickModal.default = false

// 引入turf.js,用于地图上的数学计算
import * as turf from '@turf/turf'
Vue.prototype.$turf = turf
// 语言
import mapboxLanguage from '@mapbox/mapbox-gl-language'
Vue.prototype.$mapboxLanguage = mapboxLanguage

import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'

Vue.prototype.$geocoder = MapboxGeocoder

// css样式
// require('./styles/index1.css')
require('../node_modules/font-awesome/scss/font-awesome.scss')
// require('./styles/fty/fty-template.scss')

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

Vue.prototype.$axios = axios
Vue.prototype.myxss = myxss

Vue.use(VueI18n)

import mapBoxGl from 'mapbox-gl'
Vue.prototype.$mapboxgl = mapBoxGl
import storage from './utils/storage'
Vue.prototype.$storage = storage

// // 全局异常提示框
// Vue.prototype.$confirmError = (error) => {
//   let errorCode = ''
//   if (error.traceId || error.code) {
//     errorCode = `<p style="font-size:12px;">${i18n.t('common.error_code')}: ${
//       error.code + '-' || ''
//     }${error.traceId || ''}</p >`
//   }

//   return MessageBox.confirm('Error', i18n.t('common.error'), {
//     title: error.title,
//     message:
//       `<div style="word-break: break-word">${
//         error.message || 'An error occured'
//       }</div>` + errorCode,
//     type: 'error',
//     callback: error.callback,
//     dangerouslyUseHTMLString: true,
//     showCancelButton: false
//   })
// }

const i18n = new VueI18n({
  // locale: 'en-US', // 语言标识
  // locale: window.localStorage.getItem('locale') || 'zh-CN', // 语言标识
  locale:
    window.localStorage.getItem(store.state.user.keys.storage.lang) ||
    Cookies.get('lang') ||
    'en-US', // 语言标识
  messages: {
    'zh-CN': require('./lang/zh.json'),
    'en-US': require('./lang/en.json'),
    'pt-BR': require('./lang/pt.json'),
    'ja-JP': require('./lang/ja.json')
  }
})

// locale.i18n((key, value) => i18n.t(key, value))

// 超出内容用省略号的vue指令
Vue.directive('ellipsis', Ellipsis)

Vue.directive('loadmore', Loadmore)
Vue.directive('request', Request)

Vue.component('demo-block', demoBlock)
Vue.component('el-card', Card)
Vue.component('th-progress', Progress)
Vue.component('el-banner', Banner)

Vue.config.productionTip = false

export default new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: (h) => h(App)
})

// allSettled函数在旧版本兼容性问题
Promise.allSettled =
  Promise.allSettled ||
  ((promises) =>
    Promise.all(
      promises.map((p) =>
        p
          .then((value) => ({
            status: 'fulfilled',
            value
          }))
          .catch((reason) => ({
            status: 'rejected',
            reason
          }))
      )
    ))
